<template>
  <div class="add">
    <h1>{{ $route.meta.title }}</h1>
    <table>
      <tr>
        <td>所属品类</td>
        <td>
          <el-select v-model="value" size="medium" popper-class="active">
            <el-option
              v-for="item in list"
              :key="item.id"
              :label="'/所有/' + item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </td>
      </tr>
      <tr>
        <td>品类名称</td>
        <td>
          <el-input v-model="inputValue">请输入品类名称</el-input>
        </td>
      </tr>
    </table>

    <p class="button">
      <el-button type="primary" @click="confirmAdd">提交</el-button>
    </p>
  </div>
</template> 

<script>
import { addShop, confirmAdd } from "@/api/index.js";
export default {
  data() {
    return {
      list: [],
      value: "/所有/",
      id: 0,
      inputValue: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      addShop({ categoryId: 0 }).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    confirmAdd() {
      if (this.value != "/所有/") {
        this.id = this.value;
      }
      confirmAdd({ parentId: this.id, categoryName: this.inputValue }).then(
        (res) => {
          console.log(res);
          if (res.data.status == 0) {
            alert(res.data.data);
            this.$router.push("/product/index/cate");
          }
        }
      );
    },
  },
};
</script>

<style lang="scss" scoped>
h1 {
  font-weight: normal;
}

/deep/ {
  .el-input--medium {
    width: 400px;
  }
}
table {
  tr {
    td:nth-child(1) {
      padding: 0 30px;
    }
  }
}
.button {
  width: 600px;
}
.el-button {
  display: block;
  margin: auto;
}
</style>